<template>
	<view class="container">
		<!-- 头部导航栏 -->
		<view class="header">
			<view class="nav-back" @click="goBack">
				<uv-icon name="arrow-left" size='32'></uv-icon>
			</view>
			<text class="header-title">设置</text>
		</view>
		<!-- 设置内容 -->
		<view class="setting-container">
			<uni-list>
				<uni-list-item title="清理缓存" note="">
					<text>清理缓存</text><text>3.2M</text>
				</uni-list-item>
				<uni-list-item title="账号与安全" note="">
					<text>账号与安全</text>
					<uv-icon name="arrow-right" size="28"></uv-icon>
				</uni-list-item>
				<uni-list-item title="关于小说" note="">
					<text>关于小说</text>
					<uv-icon name="arrow-right" size="28"></uv-icon>
				</uni-list-item>
			</uni-list>
		</view>
		<!-- 退出登录 -->
		<view class="logout" @tap="logout">
			<text>退出登录</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			logout(){
				uni.navigateTo({
					url: '/pages/login/loginView'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		background-color: #f6f8fa;
	}

	/* 头部导航栏样式 */
	.header {
	  display: flex;
	  align-items: center;
	  padding: 24rpx 0; 
	  background: #fff;
	  position: relative; 
	
	  .nav-back {
	    width: 88rpx;
	    padding-left: 32rpx; 
	  }
	
	  .header-title {
	    position: absolute;
	    left: 50%;
	    transform: translateX(-50%);
	    font-size: 36rpx;
	    color: #333;
	    white-space: nowrap; 
	  }
	}

	// 设置内容
	.setting-container {
		width: 95%;
		height: 115px;
		background-color: #fff;
		padding: 20rpx;

		uni-list {
			display: flex;
			flex-direction: column;

			uni-list-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-bottom: 10rpx;
			}
		}
	}

	// 退出登录
	.logout {
		height: 480px;
		text-align: center;
		color: #f5a699;
		padding-top: 30rpx;
	}
</style>